import { memo, useCallback, useState } from "react";

// 因为函数也是引用类型  父组件的更新子组件也会重新渲染
// usecallback 跟 usememo类似，但是usememo是缓存函数的返回值，而usecallback是缓存函数本身
const MemoSon = memo(function Son({ count }) {
  console.log("子组件渲染————useCallback");
  return (
    <div>
      我是son
      <p onClick={()=>count('dasd')}>可以点击我</p>
    </div>
  );
});
function Father() {
  const change = useCallback(function (msg) {
    console.log(msg);
  }, []);
  // const change = function (e) {
  //   console.log(e);
  // };
  const [count, setCount] = useState(0);
  return (
    <div className="list">
      <h1>useCallback的使用</h1>
      <button onClick={() => setCount(count + 1)}>+1————{count}</button>
      <MemoSon count={change} />
    </div>
  );
}
export default Father;
